<template name="rmdList">
	<view class="rmdBox">
		<view class="rmdItem" v-for="(item,index) in rmdData" :key="index" :data-url="item.url" :data-opt="item.opt" @tap="toPage" :style="{borderRadius:borderRadius+'px'}">
			<image  :src="item.imgSrc" :style="{height:imgHeight+'px'}"></image>
		</view>
	</view>
</template>

<script>
	export default{	
		name:'rmdList',		//组件名称
		// 传递参数
		props:{
			rmdData:{
				type:Array,
				default:function(){
					return [{
						imgSrc:"../../static/loding.png",
						url:"search",
						opt:{}
					},{
						imgSrc:"../../static/loding.png",
						url:"",
						opt:{}
					},{
						imgSrc:"../../static/loding.png",
						url:"",
						opt:{}
					}]
				}
			},
			borderRadius:{
				type:Number,
				default:10
			}
		},
		// 组件参数
		data(){
			return {
				imgHeight:this.getHeight()
			}
		},
		// 组件方法
		methods:{
			getHeight(){
				return parseInt((uni.getSystemInfoSync().screenWidth-uni.upx2px(56))*0.315*0.64)
			}
		},
		created() {
			setTimeout(()=>{
				let query = uni.createSelectorQuery().in(this);
				query.select('.rmdBox').boundingClientRect(data => {
					getApp().globalData.G_RMDLIST=data
				}).exec();
			},100)
			
		}
		
	}
</script>

<style lang="less">
	@import "../../common/public.less";
	
	.rmdBox{
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		.rmdItem{
			width: 31.5%;
			overflow: hidden;
			display: flex;
			align-items: stretch;
			image{
				width: 100%;
			}
		}
	}
</style>
